<template>
  <div id="login">
    <div class="loginConbox">
      <div class="header">
        <div class="logo">
          <img src="../../assets/logo.png">
        </div>
      </div>
      <div class="loginBox">
        <div class="loginCon">
          <p class="title">山海服务平台</p>
          <h1 class="title">让洗护行业插上互联网的翅膀</h1>
           <p class="title">助力洗护行业实体店数字化管理、互联网营销、智能化服务</p>
          <el-card shadow="always" class="login-module" v-if="smdl">
            <div slot="header" class="clearfix formTitlt">
              <span>登录</span>
              <span class="titIconbox">
                <i class="iconfont xu-saomadenglu2 fa-lg iconcolor"></i>
                <i class="iconfont xu-saomadenglu01 el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
              </span>
            </div>
            <el-form :model="loginForm" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item>
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入登录账号"
                  @keyup="submitForm"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入登录密码"
                  @keyup.enter.native="submitForm"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="subBtn" type="primary" @click="submitForm">登录</el-button>
              </el-form-item>
              <p class="smalltxt">
                <!-- <router-link class="a" to="#">忘记密码</router-link>
                <router-link class="a" to="#">忘记会员名</router-link> -->
                <router-link class="a" to="#">免费注册</router-link>
              </p>
            </el-form>
          </el-card>

          <el-card shadow="always" class="login-module" v-else>
            <div slot="header" class="clearfix formTitlt">
              <!-- <span>扫码登录</span> -->
              <span>洗护汇</span>
              <span class="titIconbox">
                <i class="iconfont xu-mimadenglu1 fa-lg iconcolor"></i>
                <i class="iconfont xu-imagevector el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
              </span>
            </div>
            <div class="ewmbox">
              <div class="ewm">
                <!-- <img src="https://img.alicdn.com/tfscom/TB1ivYYyHvpK1RjSZFqwu3XUVXa.png"> -->
                <img src="../../../static/images/微信名片.jpg" alt="" style="width:140px; height:160px">
                <!-- <h2>相关功能暂未完善，请联系开发者</h2> -->
              </div>
              <div class="ewmicon">
                <i class="iconfont xu-saomadenglu fa-2x iconcolor"></i>
                <!-- <p>打开 微信 扫一扫登录</p> -->
                <p>相关功能暂未完善，请联系开发者</p>
                <router-link class="a" to="#" style="right:0">免费注册</router-link>
              </div>
              <p class="smalltxt">
                <router-link class="a" to="#">免费注册</router-link>
              </p>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      smdl: true,
      loginResult: '',
      loginForm: {
        username: "admin",
        password: "123456"
      },
    }
  },
  methods: {
    submitForm() {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true,
          message: "账号或密码不能为空",
          type: "error"
        })
        return false
      } else {
        // 真实请求参考

        // console.log('打印request请求', this.$request)
        this.$request.fetchLogin({
          username: that.loginForm.username,
          password: that.loginForm.password
        }).


          then(res => {
            if (res.data.state != 1) {
              that.$message({
                showClose: true,
                message: res.data.msg,
                type: "error"
              })
              // console.log('出错了', res.data.msg)
              // 将返回数据存储到Vue的data中
            } else {
              // console.log('走进res', res)
              // console.log('打印token', res.data.data.token)
              that.$restBack(res.data, () => {
                that.$store.dispatch("setToken", res.data.data.token).then(res => {
                  that.$router.push({ path: "/" })
                })
                this.loginResult = res.data;
                console.log('打印登陆数据', this.loginResult)
                this.$bus.$emit('loginInfo', (data) => { res.data })
                console.log('打印this', this)
                console.log('打印总线bus', this.$bus)
              }, "登录成功")
              // that.$store.dispatch("setToken", res.data.data.token).then(res => {
              //   that.$router.push({ path: "/" })
              // })
            }
            // that.$restBack(res.data, () => {
            //   that.$store.dispatch("setToken", res.data.data.access_token).then(res => {
            //     that.$router.push({ path: "/" })
            //   })
            // }, "登录成功")
          }).catch((err) => {
            console.log(err)
            that.$message({
              showClose: true,
              message: err,
              type: "error"
            })
          })


        // axios({
        //   method: 'post',
        //   url: 'user/login',
        //   params: (
        //     {
        //       username: data.username,
        //       password: data.password
        //     }
        //   ),
        //   // data: qs.stringify(
        //   //   {
        //   //     username: that.loginForm.username,
        //   //     password: that.loginForm.password
        //   //   }
        //   // ),

        //   headers: {
        //     // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        //     // 'Content-Type': 'multipart/form-data; boundary=<calculated when request is sent>'
        //     // 'Content-Type': 'form'
        //     // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        //   }
        // }).then(res => {
        //   if (res.data.state != 1) {
        //     // that.$message({
        //     //   showClose: true,
        //     //   message: res.data.msg,
        //     //   type: "error"
        //     // })
        //     console.log('出错了')
        //   } else {
        //     console.log('走进res', res)
        //     console.log('打印token', res.data.data.token)
        //     // that.$restBack(res.data, () => {
        //     //   that.$store.dispatch("setToken", res.data.data.token).then(res => {
        //     //     that.$router.push({ path: "/" })
        //     //   })
        //     // }, "登录成功")
        //     that.$store.dispatch("setToken", res.data.data.token).then(res => {
        //       that.$router.push({ path: "/" })
        //     })
        //   }
        //   // that.$restBack(res.data, () => {
        //   //   that.$store.dispatch("setToken", res.data.data.access_token).then(res => {
        //   //     that.$router.push({ path: "/" })
        //   //   })
        //   // }, "登录成功")
        // }).catch((err) => {
        //   console.log(err)
        // })


        // 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准
        // that.$store.dispatch("setToken", that.loginForm.username).then(() => {
        //   that.$router.push({ path: "/" })
        // }).catch(res => {
        //   that.$message({
        //     showClose: true,
        //     message: res,
        //     type: "error"
        //   })
        // })
      }
    },
    // message() {
    //   const h = this.$createElement
    //   this.$notify({
    //     title: "账号密码",
    //     message: h("i", { style: "color: teal" }, "账号密码可以随意填写，为了测试效果填写的账号将会被存储为临时假 token"),
    //     duration: 6000
    //   })
    // }
  },
  mounted() {
    // this.message()
  }
}
</script>
<style lang="scss">
#login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  // background-color: #409EFF;
  //background-image: url(http://www.xiyioto.com/img/index-bg1.png);
 // background-image: url(https://p.qqan.com/up/2022-11/20221115185538372.jpg);
   background-image: url("../../assets/2.jpg");
 // background-image: url(https://www.yunxi360.com/static/pc/img/show_section1_item2.png);
  background-position: left;
  background-size: 100% 100%;
  background-repeat: repeat-x;

  // .loginConbox {
  //   background: #2d3a4b;
  //   background-color: #409EFF;

  // }

  .header {
    height: 60px;
    position: relative;
    background: #b4b5e2;
    // background-color: #409EFF;

    /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
    .logo {
      margin-left: 30px;
      width: 500px;
      float: left;
      height: 40px;
      padding-top: 10px;

      img {
        height: 100%;
      }
    }
  }

  .loginBox {
    .iconcolor {
      color: #54b3eb;
      float: right;
    }

    padding: 74px 0 118px;

    .loginCon {
      width: 990px;
      margin: auto;
      position: relative;
      height: 388px;

      .el-card__header {
        border-bottom: 0px;
      }

      .title {
        font-size: 16px;
        font-weight: 600;
        // color: #ffffff;
        width: 500px;
        float: left;
        left: -200px;
        margin-top: 0px;

        &:first-child {
          font-size: 36px;
          margin-top: 50px;
          margin-bottom: 30px;
        }
      }

      .login-module {
        width: 380px;
        height: 325px;
        margin-top: 60px;
        border: none;
        border: 2px black solid;
        position: absolute;
        right: 0;

        .formTitlt {
          font-size: 18px;
          font-weight: 400;

          .titIconbox {
            float: right;

            .pointer {
              cursor: pointer;
            }
          }
        }

        .smalltxt {
          text-align: right;

          .a {
            text-decoration: none;
            color: #999999;
            font-size: 12px;
            margin-left: 8px;
          }
        }
      }

      .el-form-item__content {
        margin-left: 0px !important;

        .subBtn {
          width: 100%;
        }
      }
    }

    .el-input__inner,
    .el-button,
    .el-card,
    .el-message {
      border-radius: 0px !important;
    }

    .el-form-item__content .ico {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 999;
      width: 40px;
      height: 39px;
      text-align: center;
      border-right: 1px solid #ccc;
    }

    .ewmbox {
      width: 100%;
      height: 240px;
      margin-top: -25px;

      .ewm {
        width: 140px;
        height: 140px;
        margin: 20px auto;

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }

      .ewmicon {
        width: 140px;
        margin: 20px auto 0;

        .iconfont {
          float: left;
        }

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }
    }
  }
}
</style>
